<template>
  <div class="container">
    <div class="chart">
      <chart :options="orgOptions" :auto-resize="true" style="width: 41vw;height:320px;"/>
    </div>
  </div>
</template>

<script>
import 'echarts/lib/chart/bar'
export default {
  name: 'LineChart',
  filters: {
    // 123
  },
  data() {
    return {
      orgOptions: {}
    }
  },
  created() {
    this.orgOptions = {
      grid: {
        left: '3%',
        top: '2%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      // X轴信息
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color: '#128dcd',
            width: 1
          }
        }
      },
      // Y轴信息
      yAxis: {
        axisLine: {
          lineStyle: {
            color: '#128dcd',
            width: 1
          }
        }
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          itemStyle: {
            normal: {
              color: function(params) {
                // console.log(params)
                // 给出颜色组
                var colorList = ['#188df0', '#188df0', '#188df0', '#fc5a65', '#188df0', '#188df0', '#188df0']
                return colorList[params.dataIndex]
              },
              // 柱形图圆角，初始化效果
              barBorderRadius: [50, 50, 50, 50],
              label: {
                show: false, // 是否展示
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
            emphasis: {
              barBorderRadius: 30
            }
          },
          // 柱状图宽度
          barWidth: '60%',
          // 柱状图数值
          data: [50, 71, 63, 88, 12, 44, 32]
        }
      ]
    }
  },
  methods: {
    // 方法
  }
}
</script>

<style scoped>
.chart {
  background-color: #fff;
}
</style>
